<!doctype html>
<html>
<head>
	<meta charset='utf-8'>
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/carousel.css">
</head>
<body>
	<section class='j_carousel carousel' data-setting='{
														"width" : 1000,
														"height" : 300,
														"imgWidth" : 600,
														"imgHeight" : 300,
														"scale" : 0.9,
														"speed" : 500,
														"autoPlay" : true,
														"verticalAlign" : "middle",
														"delay" : 2000
														}'>
		<ul class='carousel_box'>
			<li class='carousel_item'><a href="#"><img src="img/1.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/2.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/3.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/4.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/5.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/6.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/7.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/8.jpg"></a></li>
		</ul>
		<div class='carousel_control carousel_control_prev'></div>
		<div class='carousel_control carousel_control_next'></div>
	</section>
	<br>
	<br>


	<section class='j_carousel carousel' data-setting='{
														"width" : 1000,
														"height" : 300,
														"imgWidth" : 600,
														"imgHeight" : 300,
														"scale" : 0.9,
														"speed" : 1000,
														"autoPlay" : true,
														"verticalAlign" : "top",
														"delay" : 3000
														}'>
		<ul class='carousel_box'>
			<li class='carousel_item'><a href="#"><img src="img/1.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/2.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/3.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/4.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/5.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/6.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/7.jpg"></a></li>
		</ul>
		<div class='carousel_control carousel_control_prev'></div>
		<div class='carousel_control carousel_control_next'></div>
	</section>
	<br>
	<br>


	<section class='j_carousel carousel' data-setting='{
														"width" : 1000,
														"height" : 300,
														"imgWidth" : 600,
														"imgHeight" : 300,
														"scale" : 0.9,
														"speed" : 500,
														"autoPlay" : false,
														"verticalAlign" : "bottom",
														"delay" : 2000
														}'>
		<ul class='carousel_box'>
			<li class='carousel_item'><a href="#"><img src="img/1.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/2.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/3.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/4.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/5.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/6.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/7.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/8.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/9.jpg"></a></li>
			<li class='carousel_item'><a href="#"><img src="img/10.jpg"></a></li>
		</ul>
		<div class='carousel_control carousel_control_prev'></div>
		<div class='carousel_control carousel_control_next'></div>
	</section>
	<br>
	<br>



	
	<script type="text/javascript" src = 'js/jquery-2.1.1.min.js'></script>
	<script type="text/javascript" src = 'js/carousel.js'></script>
	<script type="text/javascript">
	Carousel.init($('.j_carousel'));
	</script>
</body>
</html>